.fei-dropdown__popper {
  &.fei-popper[role='tooltip'] {
    padding: 4px 0;
    background-color: var(--fei-white-color);
    max-height: none;
    box-shadow: var(--fei-shadow-down);
    border: none;

    &.is-dark {
      background-color: var(--fei-dark-bg);

      .fei-dropdown-menu .fei-dropdown-item {
        color: rgba(255, 255, 255, 0.65);

        &:hover,
        &:focus {
          outline: none;
          color: var(--fei-white-color);
          background-color: transparent;
        }

        &-selected {
          background-color: var(--fei-color-primary);
          color: var(--fei-white-color);
        }

        &-disabled {
          color: rgba(255, 255, 255, 0.35) !important;
          cursor: not-allowed;
        }

        &-divided {
          border-top: 1px solid #a0a0a0;
        }
      }
    }
  }

  .fei-dropdown__popper-selfdefine {
    outline: 0;
  }
  .fei-dropdown-menu {
    min-width: 100px;
    margin: 0;
    padding: 0 var(--fei-popper-padding);

    .fei-dropdown {
      width: 100%;
      &:not(:last-child) {
        margin-bottom: var(--fei-popper-item-margin);
      }
    }

    .fei-dropdown-item {
      position: relative;
      margin: 0;
      padding: 0 10px;
      line-height: var(--fei-popper-item-height);
      width: 100%;
      clear: both;
      color: var(--fei-color-text-default);
      font-size: var(--fei-font-size-default) !important;
      white-space: nowrap;
      list-style: none;
      cursor: pointer;
      transition: background var(--fei-animation-duration-base) ease-in-out;
      border-radius: var(--fei-popper-radius);
      margin-bottom: var(--fei-popper-item-margin);
      &:last-child {
        margin-bottom: 0;
      }

      + .fei-dropdown-item-divided {
        margin-top: calc(var(--fei-popper-item-margin) + 4px);
      }

      &:hover,
      &:focus {
        background: var(--fei-fill-color-2);
        outline: none;
      }

      &-selected {
        background: var(--fei-color-primary-light5);
      }

      &-disabled {
        color: var(--fei-color-text-disabled) !important;
        cursor: not-allowed;

        &:hover {
          color: var(--fei-color-text-disabled) !important;
          background-color: #fff;
          cursor: not-allowed;
        }
      }

      &-divided {
        &:before {
          content: '';
          position: absolute;
          top: -4px;
          left: 0;
          right: 0;
          border-top: 1px solid var(--fei-border-color-light);
        }
      }

      > .f-iconfont {
        position: relative;
        margin-right: 4px;
      }

      .f-icon-right {
        position: relative;
        right: -6px;
      }
    }
  }
}

.fei-dropdown {
  display: inline-block;
  position: relative;
  color: var(--fei-color-text-default);
  font-size: var(--fei-font-size-default);

  i.f-iconfont {
    font-size: var(--fei-font-size-default);
  }
}
